使用CSS來定義Web樣式時，難免會有不同的樣式去定義到同一個元素的情況，這時究竟採用哪一種樣式，會由串接（cascade）規則與明確度（specificity）來決定。

串接規則：

不同的樣式表來源，由串接的重要性決定。

標示 !important的使用者樣式 > 標示 !important的設計者樣式 > 設計者樣式 > 使用者樣式 > 瀏覽器預設樣式

明確度：

設計者自己定義css時，彼此間元素鎖定衝突的情況，則由明確度決定。如果明確度相同，則後定義的會覆蓋之前定義的。

明確度的是由 0,0,0,0這樣的格式來計算的。數字越左邊代表越大。

以下是選擇器（selector）與明確度的值

(1)行內定義的css => 1,0,0,0
(2)id => 0,1,0,0
(3)class => 0,0,1,0
(4)html元素和虛擬元素 => 0,0,0,1

而明確度是可以串接和累加的，例如：

h1.foo {color:blue}

就是由h1(第4種)的0,0,0,1，加上 .foo(第3種)的 0,0,1,0，所以它的明確度就變成 0,0,1,1

再一個例子

h1#bar{color:green}

它的明確度就會變成 h1 -> 0,0,0,1而#bar是 0,1,0,0，明確度就成為 0,1,0,1

另外，有時我們會使用後代選擇器(descendat selector)的方式來定義css，例如：

div p {}

這是div與p同樣都是html的元素(第4種)，所以它的明確度就是會 0,0,0,2

了解這樣的規則之後，我們可以來看看實際衝突的例子。

div span {color:blue} /* 0,0,0,2 */
div p span {color:red} /* 0,0,0,3 */

在上面例子中，div的span原本是字型顏色是藍色，但是如果span是被包在p當中，由於它的明確度更高，因此顏色就會是紅色。

另外，如果在同一個元素中定義不同的選擇器，像下面的例子

<h1 id="bar" class="foo">css</h1>

由於id的明確度比class高，所以最後會套用id的樣式，也就是color:green，而非color:blue。

有些時候在定義css時，明明已經改過css設定值，但是就是無法變更，這時就有可能是其他更高明確度的設定值導致的。

建議可以用firefox的firebug來協助css設定，如果有css的值被其他明確度更高的值取代的話，它就會將被覆蓋的值畫刪除線，這時就可以知道有問題，而可以去找到真正在作用的值。